<template>
	<view class="index-container">
		<view class="titleStyPOs">
			<view class="flex w-full" style="padding-bottom: 10rpx;">
				<view style="position: relative; flex:1">
					<u-search :placeholder="$t('请搜索')" :showAction="true" :animation="false" bgColor="#fff" v-model="keyword"
						class="searchSty" @search="goFilter" @custom="goFilter" :action-text="$t('搜索')" :height="76"></u-search>
				</view>
				<view  class="transport">
					<view class="transport_name">
						<city :value="paramsCaigou.city_name" class="w-full" @change="e => {
							paramsCaigou.city_name = e.column2.value == -1 || e.column3.value == -1 ?
								[e.column1[plang('label')], e.column2[plang('label')].replace('全部', ''), e.column3[plang('label')].replace('全部', '')].filter(item => item).join(',') :
								e.column3[plang('label')];
							paramsCaigou.city_id = e.column3.value;
						}">
							 <div class="h-full flex fz26 ml-5 w-full" 
								 :class="{ 'font-bold': paramsCaigou.city_name }" 
								:style="{ color: paramsCaigou.city_name ? '#333' : '#8c8c8c' }">
								{{ paramsCaigou.city_name || $t('请选择') }}
								</div>
						</city>
					</view>
					<u-icon v-if="paramsCaigou.city_id" name="close" color="#8C8C8C" size="24rpx" class="ml-10" @click="delAddressCaigou"></u-icon>
					<u-icon name="arrow-down" color="#8C8C8C" size="24rpx" class="ml-10"></u-icon>
				</view>
			</view>
		</view>

		<!-- <view style="height: 400rpx;"></view> -->
    <scroll-view scroll-y class="scroll-view-container" @scrolltolower="onReachBottomxxx" style="height: 100%;">
      <view  class="">
        <view class=" infoBoxSty pb-24" v-for="(item, index) in storeList" @click="goToCaigoDetail(item)">
          <view class="flex">
            <view class="img w-90 h-90 mt-10 ml-24 mb-10">
              <image :src="getImageUrl(item.avatar)" mode="aspectFill" class="w-90 h-90 "
              style="border-radius: 500rpx;"></image>
              <view class="circle-gray" v-if="item.identity != 2">
                  <image
                    :src="getImageUrl('/static/appx/locxk.png')"
                  />
                </view>
            </view>
        
            <view class="flex-1">
              <p class="ml-20 mr-20 fz28 mt-24 text-010 font-bold">{{ item[plang('username')] }}</p>
              <view class="flex-start ml-24" style="align-items: center;">
                <view class="" v-for="(it, ind) in scoreList">
                  <image v-if="it.num <= item.user_info.rating" class="w-20 h-20 ml-5"
                    src="/static/img/starBright.png"></image>
                  <image v-else class="w-20 h-20 ml-5" src="/static/img/starDark.png"></image>
                </view>
                  <span class="fz20 text-888 ml-10 ">{{$t('综合评分')}}: {{ get(item,
                    'user_info.rating') }}</span>
              </view>
              <!-- <view class="flex-start ml-20 mt-15">
                <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                <image src="@/static/icon/startOne.png" mode="" class="w-20 h-20 ml-5"></image>
                <span class="fz20 text-888 ml-10" style="margin-top: -5rpx;">{{$t('综合评分')}}: {{ get(item,
                  'user_info.rating') }}</span>
              </view> -->
              <view class="flex-start mt-15 mb-24" style="align-items: center;">
                <flag class="mr-6 ml-20 mt-5" :country="get(item, 'user_info.country')" />
                <p class="fz20 text-888 ml-10">{{
                langR == 'zh'?(get(item, 'area.mergename')):(get(item, 'area.mergename_ru'))
                }}</p>
              </view>
            </view>
          </view>
          <view class="infoMainSty">
            <!-- <image v-if="item.level == 0" src="../../static/icon/goldIcon (2).png" mode="widthFix" class="w-120 ml-16"></image>
            <image v-else-if="item.level == 1" src="../../static/img/whiteGoldBusi.png" mode="widthFix" class="w-120 ml-16"></image>
            <image v-else-if="item.level == 2" src="../../static/icon/zuanshiIcon.png" mode="widthFix" class="w-120 ml-16"></image> -->
            <image v-if="item.level == 1" 
            :src="langR =='zh'?getImageUrl('/static/img/gj_zh.png'):getImageUrl('/static/img/gj_ru.png')" 
            mode="widthFix" class="w-120 ml-16"></image>
            <image v-else-if="item.level == 2" 
            :src="langR =='zh'?getImageUrl('/static/img/bj_zh.png'):getImageUrl('/static/img/bj_ru.png')" 
            mode="widthFix" class="w-125 ml-16"></image>
            <image v-else-if="item.level == 3" 
            :src="langR =='zh'?getImageUrl('/static/img/zs_zh.png'):getImageUrl('/static/img/zs_ru.png')" 
            mode="widthFix" class="w-140 ml-16"></image>
            <p class="ml-15 mr-20 jsscak">{{$t('采购范围')}} : {{ item[plang('category_name')] || $t('暂无') }} </p>
          </view>
        </view>

        <view class="h-30"></view>
        <view v-if="nomoreCaigo" class="center text-gray-500 fz24 pt-20 pb-20" style="margin-bottom: 30rpx;">
          {{$t('没有更多了')}}
        </view>
      </view>
    </scroll-view>
	</view>
</template>

<script>

import { searchCaigouUser,request_minute } from '@/api/basic.js'

export default {
	components: {
	},

	data() {
		return {
			listTitle: [this.$t('采购商'), this.$t('供应商')],
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			current: 0,
			keyword: '',
			title: this.$t('优质货主'),
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			storeList: [],
			scoreList: [{
				num: 1
			},
			{
				num: 2
			},
			{
				num: 3
			},
			{
				num: 4
			},
			{
				num: 5
			},
			],
			paramsCaigou: {
				page: 1,
				limit: 10,
				keyword: '',
				city_id: '',
				city_name: ''
			},
			paramsList: {
				pagenum: 1,
				limit: 10,
				aid: 1,
				keyword: '',
				area_id: '',
				city_name: ''
			},
			supplierList: [],
			nomore: false,
			nomoreCaigo: false,
			isShop: 0, // 1 从商城过来的 0 其他 
		}
	},
	watch: {
	
		'paramsCaigou.city_id': {
			handler(val) {
				console.log(this.paramsCaigou.city_id)
				this.searchCaigouUser(true)
			}
		}
	},
	mounted() {
    this.paramsCaigou.country = this.langR;
		this.paramsList.country = this.langR;
		this.searchCaigouUser(true)
	},
	onLoad(options) {
		this.current = 0;
	},
	methods: {

		delAddressCaigou() {
			this.paramsCaigou.city_id = ''
			this.paramsCaigou.city_name = ''
			this.searchCaigouUser(true)
		},
		changeTitle(index) {
      this.searchCaigouUser(true)

		},
		call(info) {
			if(uni.getStorageSync("user_id") == (info.mid || info.id)) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
			
				request_minute({
					user_id: uni.getStorageSync("user_id"),
					target_id: info.mid || info.id,
				}).then(res => {
				if (res.data.data.flag == 1) {
					this.isMessageGo({
						action: 'call',
						data: {
							userId:  info.mid || info.id,
							type: res.data.data.type || 1,
						}
					})
				} else {
					uni.$u.toast(this.$t('积分不足，请充值积分'))
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/vip/scorePoint',
						})
					}, 500)
				}
			})
			
			}	
		},
		goToCaigoDetail(info) {
			// if(info.identity != 2) {
			// 	uni.showModal({
			// 		title: this.$t('提示'),
			// 		content: this.$t('确认联系客户？'),
			// 		confirmText: this.$t('确定'),
			// 		cancelText: this.$t('取消'),
			// 		success: (res) => {
			// 			if(res.confirm) {
			// 				this.call(info)
			// 			}
			// 		}
			// 	})
			// 	return;
			// }
			uni.navigateTo({
				url: `/pages/myPersonPage/index?targetUserId=${info.id}`,
        webview: 'zWebView',
			})
		},
		goTogyDetail(info) {
			console.log('info---', info.mid)
			// if(info.status != 2) {
			// 	uni.showModal({
			// 		title: this.$t('提示'),
			// 		content: this.$t('确认联系客户？'),
			// 		confirmText: this.$t('确定'),
			// 		cancelText: this.$t('取消'),
			// 		success: (res) => {
			// 			if(res.confirm) {
			// 				this.call(info)
			// 			}
			// 		}
			// 	})
			// 	return;
			// }
			uni.navigateTo({
				url: `/pages/details/merchantDetail?bid=${info.id}`,
				webview: 'zWebViewShop'
			})
		},
		searchCaigouUser(init) {
			uni.showLoading({
				title: this.$t('加载中'),
			});
			if (init) {
				this.paramsCaigou.page = 1
				this.nomoreCaigo = false;
			}
			searchCaigouUser({ ...this.paramsCaigou }).then(res => {
				console.log('res----', res)
				if (res.data.code == 200) {
					if (this.paramsCaigou.page == 1) {
						this.storeList = res.data.data.data.list || []
					} else {
						this.storeList = [...this.storeList, ...res.data.data.data.list]
					}
					console.log('this.storeList', this.storeList)
					//{{$t('当前')}}请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}{{$t('没有更多了')}}
					if (this.get(res, 'data.data.data.list').length == 0 || this.get(res, 'data.data.data.list').length < 10) {
						this.nomoreCaigo = true;
					}
				}
				uni.hideLoading()
			})
		},
		//上拉加载
		onReachBottomxxx() {
      this.paramsCaigou.page++
      this.searchCaigouUser()
		},
		goFilter(e) {
      this.paramsCaigou.keyword = e
      this.searchCaigouUser(true)
		},

	}

}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';

page {
	background: #F6F7FB;
}

.index-container {
	width: 100%;
	height: 100%;
	z-index: 60;
	// overflow: scroll;

	/deep/ .u-checkbox {
		width: 100% !important;
	}

	/deep/ .u-checkbox__label {
		width: 100% !important;
	}
}

.titleStyPOs {
	// background: #F6F7FB url("https://gluz-oss.oss-cn-beijing.aliyuncs.com/static/backcolorImg.png") no-repeat top / 100%;
	// position: sticky;
	width: 100%;
	z-index: 10;
  margin-top: 18rpx;

	// top: 0;
}

.commonSty {
	color: #979CAA;
	font-family: PingFang SC;
	font-size: 32rpx;
	line-height: 32rpx;
	letter-spacing: 0px;
	height: 60rpx;
}

.activeSty {
	font-family: PingFang SC;
	font-weight: 600;
	font-size: 50rpx;
	letter-spacing: 0px;
	color: #000;
	border-bottom: 5rpx solid #4BB0FF;
}

.searchSty {
	// width: 65% !important;
	flex: 1;
	// display: flex;
	margin-left: 26rpx !important;
	// margin-top: 26rpx !important;
	// margin-bottom: 30rpx !important;

	/deep/ .u-search__content {
		background-color: #fff !important;
		height: 78rpx !important;
		// position: relative;
		// z-index: 2;
	}

	/deep/ .u-input {
		background-color: #fff !important;
	}

	/deep/ .u-icon__icon {
		font-size: 46rpx !important;
		color: #74C2FF !important;
	}

	/deep/ .u-action {
		width: 110rpx !important;
		height: 50rpx !important;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%) !important;
		text-align: center;
		line-height: 50rpx;
		font-family: PingFang SC;
		color: #fff;
		font-weight: 500;
		font-size: 26rpx;
		letter-spacing: 0px;
		border-radius: 500rpx;
		position: absolute;
		z-index: 10;
		right: 20rpx;
	}

	/deep/ .u-search__action {
		width: 110rpx;
		height: 50rpx;
		border-radius: 500rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 50rpx;
		letter-spacing: 0px;
		color: #fff;
		position: absolute;
		z-index: 10;
		right: 16rpx;
	}
}

.transport {
	min-width: 135rpx;
	// margin-left: 16rpx;
	display: flex;
	align-items: center;
}

.infoBoxSty {
	background-color: #fff;
	margin-left: 24rpx;
	margin-right: 24rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
	padding-bottom: 24rpx;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
}

.infoMainSty {
	min-height: 54rpx;
	margin-left: 24rpx;
	margin-right: 24rpx;
	background-color: #FFF7EC;
	border-radius: 8rpx;
	// line-height: 54rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	p {
		font-size: 20rpx;
		color: #D58349;
	}
}
.jsscak {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1;
}

.infoBoxSty {
	.img {
		position: relative;
	}
	.circle-gray {
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.7);
		border-radius: 50%;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		image {
			width: 40rpx !important;
			height: 40rpx !important;
		}
	}
}

</style>
